✍️ 正文

前端js库

• ui界面 material ui, antd, bootstrap
  • ui flutter
  • modal
    • 在需要弹出modal的表单上添加onClick方法
    • 实现该方法，然后把该方法传回到子组件
    • 子组件使用该方法
  • BootstrapBootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
• jQuery：JavaScript库，操作DOM使用。简化程序。
• AJAX ：JavaScrip新的方法和思路AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

• 前端语言实现后端：
• nodejs：能够在服务器端运行js的开放源代码、跨平台的运行环境

  • 基础

    • 异步：async await promise
      • let：块作用域，区别于var
      • 处理异步的思路
        • 递归，给出明确的判断
        • 闭包，回调函数
        • 模板化回调函数
          • p = new Promise(function(resolve,reject){})
          • p.then(function(data){}
        • 再将promise抽象简化成async和await
      • async 是让方法变成异步
      • await 是等待异步方法执行完成
      • async function test() {
        • return new Promise((resolve, reject) => {})
      • } // 里面需要返回一个promise
      • var data = await test()，但它必须包含在一个异步函数里面。因为test是异步的
    • 请求类型：get/post
    • CommonJS：为JavaScript提供一个标准库。nodejs就是它的模块化实现。
    • 核心模块有：http模块、url、fs文件模块。用require引入即可使用。
      • fs
        • readStream
        • writeStream
        • readStream.pipe(writeStream)
      • http
    • 箭头函数，匿名函数
    • 模板字符串

  • 网络编程要点

    • 自定义模块，则是用户自己编写的模块。
      • exports或module.exports暴露属性或者方法
      • 引入即可使用
      • node_module为默认的模块路径
      • npm init -y可以生产而配置文件package.json
    • ejs模板引擎
      • 引入
      • 配置中间件
        • app.use(view('模板的地址', { extension: 'html' } ) )
      • ctx.render('index')
      • 条件、判断、跳转
      • 公共数据：ctx.state.userinfo='name';
    • 自定义包的文件规范
      • package.json：包描述文件
      • bin：用于存放可执行二进制文件的目录
      • lib：用于存放JavaScript代码的目录
      • doc：用于存放文档的目录
    • api接口
      • 内容和要求
        • url： localhost:3000/register
        • 请求方式：post/get
        • 参数类型与格式
          • 参数 是否必须 类型 说明
          • username Y string 用户名
          • password Y string 密码
          • type Y string 类型
        • 响应数据格式、返回示例
          • 成功：{ "code": 0, "data": { "_id": "1234", "username": "vivi", "type": "admin } }
          • 失败：
      • 重要概念
        • 前后端交互的API接口
        • 注册登陆接口
        • 更新用户信息、获取当前user、获取用户列表
        • 获取当前用户的聊天信息列表、修改指定消息为已读
        • 测试接口
        • 调试接口
        • 对接口
        • 联调
        • 模拟数据mock
      • 接口文档
    • 访问静态资源
    • 路由
      • 拆分路由
    • 模板引擎
      • render
    • 数据库
      • 初始化
        • 安装数据库模块：npm install mongodb --save
        • 引入数据库模块：const { mongoClient } = require('mongodb')
        • 定义数据库连接地址： const url = 'mongodb://ip:port'
        • 定义要操作的数据库： const dbName = 'dbname'
        • 实例化MongoClient，传入数据库链接地址：const client = new MongoClient(url)
        • 连接数据库：
          • client.connect((err) => {
            • if (err) {}
            • let db = client.db(dbname);
            • // 数据库操作完毕后，一定要关闭数据库
            • client.close()
          • })
        • 使用完，注意在上面关闭数据库
      • 使用
        • 增删改查
    • 结构
      • 基础项目配置文件
        • package.json 项目配置文件，用npm init自动生成，可配置自运行脚本
        • package-lock 或 yarn.lock 依赖的包的信息
        • 项目有关信息配置文件
          • .env
        • 版本控制.git
        • 自动部署
        • docker配置文件
        • 更改日志、许可证、帮助文档
      • src：源代码
        • config：
        • controller：
        • docs：
        • middlewares：
        • models：
        • routes：
        • services：业务逻辑
        • utils：
        • validations：
        • app.js ： express app
        • index.js ： app入口
      • bin：
      • tests：测试文件

  • 框架和中间件：

  • koa：使用了es6语法规范的服务器框架

    • 脚手架工具：koa-generator的使用
      • npm i：安装所有的库
      • npm start和npm run dev
    • 上下文 ctx
      • ctx.body 向request中写入
      • ctx.query 获取对象，获取时推荐使用
      • ctx.querystring 获取字符串
      • ctx.request.url 获取get传值
      • ctx.url 获取url地址
    • 路由 router
      • 路由模块化
      • 动态路由
        • :aid:cid 多个传值
        • 获取动态路由的地址：ctx.params
      • 路由嵌套
    • 模块化：路由模块化、视图模块化
    • 中间件 middleware：匹配路由之前，和之后需要的操作都是通过中间件来完成的。强大的功能都是通过第三方中间件来实现的
      • 中间件的执行流程：类似于管道
        • 洋葱匹配模型：
        • request，从外到内依次匹配
        • response，再从内到外依次匹配
      • 分类
        • app.use(async (ctx, next) => {
          • 中间件的功能
          • await next(); //当前路由匹配完成后继续向下匹配
          • 错误处理功能
        • } )
        • 应用级中间件
        • 路由中间件：匹配到一个路由后，继续往下匹配
        • 错误处理中间件
        • 第三方中间件
      • 作用
        • 执行任何代码
        • 修改请求和相应对象
        • 终结请求-相应循环
        • 调用堆栈中的下一个中间件
      • 使用场景，如权限验证、错误处理

    ---

    • 第三方中间件：
    • 提交数据：post、koa-bodyparser
    • 静态资源中间件：koa-static
      • app.use(static(__dirname+'/static')); // 静态资源中间件可以配置多个。
    • cookie：
      • ctx.cookie.set('userinfo', 'name');
      • var userinfo = ctx.cookie.get('userinfo');
      • 参数
        • maxAge
        • expires
        • path
        • domain
        • secure
        • httpOnly
        • overwrite
      • 在cookie中设置中文，用base64作为过渡
      • 使用情景
        • 保存用户信息
        • 浏览器历史记录
        • 猜你喜欢
        • 10天免登陆
        • 多个页面之间的数据传递
        • 购物车功能
    • session：koa-session
      • seesion是另一种记录客户状态的机制，和cookie不同的是，它保存在服务器上
• 模板引擎
  • jade模板引擎
  • art-template
    • 安装模板引擎
    • 引入模板引擎
    • 配置模板引擎
    • 使用
    • 输出，原文输出
      • 绑定html代码
    • 条件，循环
    • 变量
    • 模板继承，子模板
    • 过滤器
    • 公共 include

• 通用中间件，库，模块：
• 安全 secure
  • cors 跨域模块
  • 密码加密：bcryptjs
  • helmet：安全，避免web安全漏洞
• validations 数据验证： 提交资料时的数据验证和数据要求
  • validate：对发送的请求做数据检查和数据校验
  • 基础 custom：密码的要求，数据库地址的要求
  • auth.validation：register、login、logout、refreshTokens、forgotPassword、resetPassword、verifyEmail
  • user.validation：createUsers、getUsers、getUser、updateUser、deleteUser
• 工具 utils
  • dotenv：保存数据库账户名，密码等需要保密的信息
  • static path 静态资源
  • 图片上传 multer
  • compression 压缩
  • moment：日期处理
  • bodyparser 数据提取，解析
  • path 路径工具
  • swagger：注释、文档、api接口文档自动生成
• 错误处理
  • error 自定义错误
  • catchAsync：统一的同步错误处理
  • ApiError：统一的api错误处理
  • pick？
• config 配置文件
  • .env中信息的验证和使用：config
  • 日志信息的配置：logger、morgan
  • 鉴权的配置信息：passport、roles、tokens

• 数据库连接 database
  • mongoose 操作mongodb的nodejs的模块
    • 引入mongoose，连接数据
      • const mongoose = require('mongoose')
      • mongoose.connect('mongodb://127.0.0.1:27017/dbname')
    • 定义schema，它需要和数据库的字段一一对应
      • var UserSchema = mongoose.Schema({ })
    • 定义数据库模型，操作数据库
      • var User = mongoose.model('User', UserSchema, 'user')
      • 第三个参数为所操作数据库中的表名，如省略，默认表名为users
    • 操作数据库
      • 实例化model
      • 操作实际数据
    • mongoose 默认参数，模块化，性能
      • model
        • db.js ：连接数据库
        • user.js ：定义schema和数据模型
    • 预定模式修饰符和自定义修饰符
      • trim、lowercase、uppercase
      • set(parmas)
    • 设置索引：index、unique
    • 自定义方法：静态方法、实例方法
    • 数据校验：
      • required、max、min
      • enum：枚举类型，要求数据必须满足枚举值。比如状态值，只能是0、1、2，则enum:[0,1,2]，枚举必须用在string类型上。
      • match：增加的数据必须符合match（正则）规则
      • maxlegth、minlength：数据的长度
    • 多表的 聚合管道
  • 数据库 mongodb：自己封装数据库
    • 连接数据库，单例模式
    • 增删改查
  • models：数据模型
  • cookie和session
  • 使用cookie：cookie-parser
    • cookie保存在客户端
    • 过期时间
    • 是否加密 signed？：boolean；
    • 哪些路由可以访问
    • 二级域名中多域名共享cookie
    • 只有https有效
  • 数据验证 joi
• ajax, axios和fetch：服务器获取数据，前后台交互
  • 引入
  • axios的封装
  • axios.get(url).then(处理函数：提示成功，获取数据).catch（function（error）{console.log（error）}）.then（function（）{}）//always executed
  • axios.post(url，jsonData).then()
  • 如果在函数体内调用axios，则该函数需要为async
• 中间件 如：redux-thunk, redux-saga
  • 可以把异步，数据库获取放到中间件中

echart, antv：数据可视化

dev模块

源代码学习

• 注释
• 将提示信息，错误信息改成中文

📌 大纲

📝 主题描述

🗂️ 目标

🎯 目标和任务分解

🧠 思考的维度

🎉 总结

📖 参考文献